<header>
    <h1>Create your account</h1>
</header>

<form id="setup" class="gh-flow-create">
    {{gh-profile-image email=email setImage=(action "setImage")}}

    {{#gh-form-group errors=errors hasValidated=hasValidated property="blogTitle"}}
        <label for="blog-title">Blog title</label>
        <span class="gh-input-icon gh-icon-content">
            {{svg-jar "content"}}
            {{gh-trim-focus-input
                tabindex="1"
                type="text"
                id="blog-title"
                name="blog-title"
                placeholder="Eg. The Daily Awesome"
                autocorrect="off"
                value=(readonly blogTitle)
                input=(action (mut blogTitle) value="target.value")
                focus-out=(action "preValidate" "blogTitle")
                data-test-blog-title-input=true}}
        </span>
        {{gh-error-message errors=errors property="blogTitle"}}
    {{/gh-form-group}}

    {{#gh-form-group errors=errors hasValidated=hasValidated property="name"}}
        <label for="name">Full name</label>
        <span class="gh-input-icon gh-icon-user">
            {{svg-jar "user-circle"}}
            {{gh-text-input
                tabindex="2"
                id="name"
                name="name"
                placeholder="Eg. John H. Watson"
                autocorrect="off"
                autocomplete="name"
                value=(readonly name)
                input=(action (mut name) value="target.value")
                focus-out=(action "preValidate" "name")
                data-test-name-input=true}}
        </span>
        {{gh-error-message errors=errors property="name"}}
    {{/gh-form-group}}

    {{#gh-form-group errors=errors hasValidated=hasValidated property="email"}}
        <label for="email">Email address</label>
        <span class="gh-input-icon gh-icon-mail">
            {{svg-jar "email"}}
            {{gh-text-input
                tabindex="3"
                type="email"
                id="email"
                name="email"
                placeholder="Eg. john@example.com"
                autocorrect="off"
                autocomplete="username email"
                value=(readonly email)
                input=(action (mut email) value="target.value")
                focus-out=(action "preValidate" "email")
                data-test-email-input=true}}
        </span>
        {{gh-error-message errors=errors property="email"}}
    {{/gh-form-group}}

    {{#gh-form-group errors=errors hasValidated=hasValidated property="password"}}
        <label for="password">Password</label>
        <span class="gh-input-icon gh-icon-lock">
            {{svg-jar "lock"}}
            {{gh-text-input
                tabindex="4"
                type="password"
                id="password"
                name="password"
                placeholder="At least 10 characters"
                autocorrect="off"
                autocomplete="new-password"
                value=(readonly password)
                input=(action (mut password) value="target.value")
                focus-out=(action "preValidate" "password")
                data-test-password-input=true}}
        </span>
        {{gh-error-message errors=errors property="password"}}
    {{/gh-form-group}}

    {{#gh-task-button
        task=setup
        type="submit"
        tabindex="5"
        class="gh-btn gh-btn-green gh-btn-lg gh-btn-block gh-btn-icon"
        as |task|
    }}
        {{#if task.isRunning}}
            <span>{{svg-jar "spinner" class="gh-icon-spinner gh-btn-icon-no-margin"}}</span>
        {{else}}
            <span>Last step: Invite staff users {{svg-jar "arrow-right-small" class="gh-btn-icon-right"}}</span>
        {{/if}}
    {{/gh-task-button}}
</form>

<p class="main-error">{{flowErrors}}&nbsp;</p>
